<template>
	<view class="m-list">
		<view class="m-list-dl" v-for="(item,index) in getListData" :key="index">
			<view class="_title" v-if="showTitle == 1">{{item.title}}</view>
			<view class="_content">
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'m-list',
		props:{
			title:{
				type:String,
				default:'什么是塔罗牌'
			},
			content:{
				type:String,
				default:'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询'
			},
			showTitle:{
				type:Number,
				default:1
			},
			listData:{
				type:Array,
				default:()=>{
					return [
						{
							'title':'帮助1',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
						},
						{
							'title':'帮助2',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
						},
						{
							'title':'帮助3',
							'content':'咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询咨询',
						}
					]
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			getListData(){
				return this.listData
			}
		}
	}
</script>

<style lang="scss">
	.m-list{
		z-index:10;
		width:80%;
		height: auto;
		margin:auto;
		position:relative;
		margin-top:25upx;
		color: white;
		overflow-y: scroll;
		
		
		.m-list-dl{
			margin-top: 40upx;
		}
		
		._content{
			height:100%;
			font-size:9pt;
			position:relative;
			margin-top:25upx;
			padding:10rpx 25upx;
			border:4rpx solid #4B81E8;
			box-shadow:1upx 3upx 5upx 6upx #4B81E8;
			border-radius:15upx;
		}
	}
</style>
